<template>
  <div class="business">
    <HeaderBar />

    <a-card :bordered="false" style="margin: 16px 0;">
      <div class="condition-wrapper">
        <div class="condition-item">
          <div class="item-label">行业分类</div>

          <div class="item-value">
            <div
              class="value"
              v-for="item in [{ name: '全部' }, ...config.c_types]"
              :key="item.ID"
              :class="{ active: item.ID === query.cWork }"
              @click="select('cWork', item.ID)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>

        <div class="condition-item" v-if="currentProduct.length">
          <div class="item-label">品名</div>
          <div class="item-value">
            <div
              class="value"
              v-for="item in currentProduct"
              :key="item.ID"
              :class="{ active: item.ID === query.cProduct }"
              @click="select('cProduct', item.ID)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </a-card>

    <a-card :bordered="false" style="margin-bottom: 16px;">
      <div class="s-title">
        <span>{{ "供应市场" }}</span>
        <span v-if="query.cWork">{{ getName(query.cWork) }}</span>
        <span v-if="query.cProduct">{{ getName(query.cProduct) }}</span>
      </div>
    </a-card>

    <a-card
      :body-style="{ padding: '0px' }"
      :bordered="false"
      style="margin-bottom: 16px;"
    >
      <a-table
        style="margin-top: 20px;cursor: pointer"
        :columns="columns"
        :bordered="false"
        :data-source="list"
        :pagination="pagination"
        rowKey="ID"
        :loading="loading"
        :customRow="
          (record, index) => {
            return {
              on: {
                click: () => {
                  goDetail(record);
                }
              }
            };
          }
        "
      >
        <div slot="users" slot-scope="text, record">
          {{ record.users.name }}
        </div>

        <div slot="CreatedAt" slot-scope="text">
          {{ text | date }}
        </div>

        <div slot="cWork" slot-scope="text, record">
          {{ record.c_work_info.name }}
        </div>

        <div slot="cProduct" slot-scope="text, record">
          {{ record.c_product_info.name }}
        </div>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import HeaderBar from "@/components/headerBar/HeaderBar";
import { getGoods } from "@/api/account";
import storage from "@/utils/storage";

const columns = [
  {
    title: "商品或服务",
    dataIndex: "title",
    scopedSlots: { customRender: "title" }
  },
  {
    title: "企业名称",
    dataIndex: "users",
    scopedSlots: { customRender: "users" }
  },
  {
    title: "行业",
    dataIndex: "cWork",
    scopedSlots: { customRender: "cWork" }
  },
  {
    title: "品类名",
    dataIndex: "cProduct",
    scopedSlots: { customRender: "cProduct" }
  },
  {
    title: "质量等级",
    dataIndex: "quality",
    scopedSlots: { customRender: "quality" }
  },

  {
    title: "发布时间",
    dataIndex: "CreatedAt",
    scopedSlots: { customRender: "CreatedAt" }
  }
];

export default {
  components: {
    HeaderBar
  },
  watch: {
    query: {
      handler() {
        this.getGoods();
      },
      deep: true
    }
  },
  data() {
    return {
      query: {
        cWork: undefined,
        cProduct: undefined,
        applyStatus: 3
      },
      pagination: {
        total: 0,
        showTotal: total => `共${total}条`,
        pageSize: 20,
        onChange: page => {
          this.query.page = page;
          this.getGoods();
        }
      },
      loading: false,
      list: [],
      columns
    };
  },
  computed: {
    currentProduct() {
      let current = [{ name: "全部" }];

      if (this.query.cWork) {
        for (const item of this.config.c_types) {
          if (item.ID == this.query.cWork) {
            current = [{ name: "全部" }, ...item.c_types];
          }

          current;
        }
      } else {
        for (const item of this.config.c_types) {
          current = [...current, ...item.c_types];
        }
      }

      return current;
    }
  },
  methods: {
    getName(id) {
      for (const item of this.config.c_types) {
        if (item.ID === id) {
          return item.name;
        }

        for (const inner of item.c_types) {
          if (inner.ID === id) {
            return inner.name;
          }
        }
      }
    },
    select(key, id) {
      this.query[key] = id;

      if (key === "cProduct") {
        for (const item of this.config.c_types) {
          for (const inner of item.c_types) {
            if (inner.ID === id) {
              this.query.cWork = item.ID;
              return;
            }
          }
        }
      } else {
        let cProductId = this.query.cProduct;
        this.query.cProduct = undefined;
        if (key === "cWork") {
          for (const item of this.config.c_types) {
            if (item.ID === this.query.cWork) {
              for (const inner of item.c_types) {
                if (inner.ID === cProductId) {
                  this.query.cProduct = inner.ID;
                }
              }
            }
          }
        }
      }
    },
    async getGoods() {
      this.loading = true;
      const res = await getGoods(this.query);
      this.loading = false;
      this.pagination.total = res.data.total;
      this.list = res.data.list;
    },
    goDetail(record) {
      storage.setItem("GOODS_ITEM", record);
      this.$router.push(`/company/${record.userId}/goods/${record.ID}`);
    },
    getID(name) {
      for (const item of this.config.c_types) {
        if (name == item.name) {
          return item.ID;
        }
      }
    }
  },

  mounted() {
    this.getGoods();

    this.query.cWork = this.getID(this.$route.query.cWork || undefined);
    this.query.cProduct = this.getID(this.$route.query.cProduct || undefined);
  }
};
</script>

<style lang="less" scoped>
.business {
  .condition-wrapper {
    padding-top: 8px;
    .condition-item {
      display: flex;
      margin-bottom: 16px;
      &:last-child {
        margin-bottom: 0;
      }

      .item-label {
        width: 90px;
        color: @text-color-2;
        font-size: 16px;
      }

      .item-value {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        font-size: 15px;

        .value {
          margin-right: 8px;
          padding: 2px 10px;
          border-radius: 4px;
          margin-bottom: 16px;
          color: @text-color-1;
          &:hover {
            color: @primary-color;
            cursor: pointer;
          }

          &.active {
            background: @primary-1;
            color: @primary-color;
            font-weight: 500;
          }
        }
      }
    }
  }

  .s-title {
    font-size: 18px;
    font-weight: bold;
    span {
      margin-right: 16px;
    }
  }
}
</style>
